---
import Home from '@/layouts/Home.astro';
import MyCard from '@/components/MyCard.vue';
import DocList from '@/components/DocList.vue';
import { type DocItem, generate } from '@/utils/generateDocTree';

const blogs = await Astro.glob<DocItem>('../pages/blog/**/*.{md,mdx}');
const { list } = generate(blogs);
const display = list.slice(0, 10);
---

<Home>
	<div class="content">
		<DocList client:load list={display} />
	</div>

	<div class="absolute right-18 top-10 h-full">
		<div class="card my-card">
			<MyCard client:load />
		</div>
	</div>
</Home>

<style lang="scss">
.content {
	@apply w-full 2xl:w-[62.5%] mx-auto mt-10;
}
.card {
	@apply lt-2xl-hidden 2xl:right-0 sticky;
}
.my-card {
	@apply top-30;
}
</style>
